import CustomCalendar from '@/components/CustomCalendar';
import { getSignInDay, getSignInRecord } from '@/services/user';
import useRequest from '@ahooksjs/use-request';
import { Card, Col, message, Row } from 'antd';
import { useState } from 'react';
import styles from './index.less';
const Index = () => {
  // 连续签到天数
  const [cSIDays, setCSIDays] = useState(0);
  // 签到总天数
  const [tSIDays, setTSIDays] = useState(0);
  // 获取签到天数
  useRequest(getSignInDay, {
    onSuccess(res) {
      const { code, message: msg, data } = res;
      if (code === 200) {
        setCSIDays(data);
      } else {
        message.error(msg);
      }
    },
  });
  // 获取签到总数
  useRequest(getSignInRecord, {
    onSuccess(res) {
      const { code, message: msg, data = [] } = res;
      if (code === 200) {
        setTSIDays(data.length);
      } else {
        message.error(msg);
      }
    },
  });
  return (
    <div className={styles.adminHomeWrapper}>
      <Row gutter={24}>
        <Col span={12}>
          <Card className={styles.signInWrapper}>
            <div className={styles.countWrapper}>
              <div className={styles.countItem}>
                <div className={styles.count}>{cSIDays}</div>
                <div className={styles.countDescribe}>连续签到天数</div>
              </div>
              <div className={styles.countItem}>
                <div className={styles.count}>{tSIDays}</div>
                <div className={styles.countDescribe}>累计签到天数</div>
              </div>
              <div className={styles.countItem}>
                <div className={styles.count}>3385555</div>
                <div className={styles.countDescribe}>连续签到天数</div>
              </div>
            </div>
            <CustomCalendar />
          </Card>
        </Col>
        <Col span={12}>
          <Card className={styles.signInWrapper}>
            <p>Card content</p>
            <p>Card content</p>
            <p>Card content</p>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Index;
